<template>
	<!-- vip-200 -->
	<view class="zy-p-lg zy-mt-lg" style="background-color: white;">
		<!--VIP1： -->
		<view v-if="type==1">
			<view class="zy-row zy-bg-black-gradient zy-ph-lg zy-mb">
				<image src="@/static/img/vip_1.png" style="width: 88rpx;" mode="widthFix"></image>
				<view class="zy-flex-width zy-text-white zy-ml" style="color: #FFF4E2;">Tempoh sath 25 hart</view>
				<view class="zy-text-black zy-bg-yellow-gradient">KemasKini</view>
			</view>
			<!--VIP： vip-?;活动；更多 -->
			<view class="zy-row-between">
				<!-- vip-?;活动 -->
				<view class="zy-row">
					<image src="@/static/img/zone_vip_200.png" style="width: 175rpx;" mode="widthFix"></image>
					<view class="zy-row zy-ml" style="position: relative; width: 160rpx; height: 40rpx;">
						<image src="@/static/img/home_activity.png" style="width: 100%; height: 100%;" mode="aspectFit"></image>
						<view class="zy-row" style="position: absolute; z-index: 99; width: 100%; height: 100%;">
							<view class="zy-row-center zy-flex zy-row zy-text-white-sm-super" style="height: 100%;"> Subsu </view>
							<view class="zy-row-center zy-flex zy-row zy-text-main-lg-bold" style="height: 100%;font-style:italic;">5%</view>
						</view>
					</view>
				</view>
				<!-- 更多 -->
				<view class="zy-row">
					<view class="zy-text-gray zy-mr-sm">Lihat lagi</view>
					<zy-arrow-right></zy-arrow-right>
				</view>
			</view>
		</view>
		<!--VIP2 -->
		<view class="zy-row-between" v-if="type==2">
			<!-- vip-2;活动 -->
			<view class="zy-row">
				<view class="zy-text-black-lg-super-bold">Vip2</view>
				<view class="zy-row zy-ml" style="position: relative; width: 160rpx; height: 40rpx;">
					<image src="@/static/img/home_activity.png" style="width: 100%; height: 100%;" mode="aspectFit"></image>
					<view class="zy-row" style="position: absolute; z-index: 99; width: 100%; height: 100%;">
						<view class="zy-row-center zy-flex zy-row zy-text-white-sm-super" style="height: 100%;"> Subsu </view>
						<view class="zy-row-center zy-flex zy-row zy-text-main-lg-bold" style="height: 100%;font-style:italic;">5%</view>
					</view>
				</view>
			</view>
			<!-- 更多 -->
			<view class="zy-row">
				<view class="zy-text-gray zy-mr-sm">See more</view>
				<zy-arrow-right></zy-arrow-right>
			</view>
		</view>
		<!--VIP3 -->
		<view class="zy-row-between" v-if="type==3">
			<!-- vip-3;活动 -->
			<view class="zy-row">
				<view class="zy-text-black-lg-super-bold">Vip3</view>
				<view class="zy-row zy-ml" style="position: relative; width: 160rpx; height: 40rpx;">
					<image src="@/static/img/home_activity.png" style="width: 100%; height: 100%;" mode="aspectFit"></image>
					<view class="zy-row" style="position: absolute; z-index: 99; width: 100%; height: 100%;">
						<view class="zy-row-center zy-flex zy-row zy-text-white-sm-super" style="height: 100%;"> Subsu </view>
						<view class="zy-row-center zy-flex zy-row zy-text-main-lg-bold" style="height: 100%;font-style:italic;">5%</view>
					</view>
				</view>
			</view>
			<!-- 更多 -->
			<view class="zy-row">
				<view class="zy-text-gray zy-mr-sm">See more</view>
				<zy-arrow-right></zy-arrow-right>
			</view>
		</view>
		
		<!-- item公用的 -->
		<view class="zy-row-wrap zy-mt">
			<view class="zy-mt-lg zy-mr" style="width: 328rpx;">
				<view style="width: 100%; height: 328rpx; position: relative; ">
					<image style="width: 100%; height: 100%;border-radius: 15rpx;" :src="getTestImage()"></image>
					<view class="zy-row zy-btn-pink-capsule-r zy-p-sm" style="position: absolute; top: 30rpx; left: 0;">
						<image src="@/static/img/vip_2.png" class="zy-icon-sm" mode="widthFix"></image>
						<view class="zy-text-white-sm zy-ml-sm">₱10</view>
					</view>
					<zy-button content="NEW" size="sm" color="black"
						style="position: absolute; bottom: 15rpx; right: 15rpx;"></zy-button>
				</view>
				<view class="zy-text-black-lg-bold zy-mt-sm"> Product title </view>
				<view class="zy-row">
					<view class="zy-text-black">₱</view>
					<view class="zy-text-main-lg-bold">10.00</view>
				</view>
			</view>
			
			<view class="zy-mt-lg" style="width: 328rpx;">
				<view style="width: 100%; height: 328rpx; position: relative; ">
					<image style="width: 100%; height: 100%;border-radius: 15rpx;" :src="getTestImage()"></image>
					<view class="zy-row" style="position: absolute; top: 0; left: 0;">
						<image src="@/static/img/vip_bg_black.png" style="width: 148rpx;height: 44rpx;"></image>
						<view class="zy-text-yellow-sm zy-ml-sm" style="position: absolute; top: 5rpx; left: 50rpx;">₱10</view>
					</view>
					<zy-button content="NEW" size="sm" color="black"
						style="position: absolute; bottom: 15rpx; right: 15rpx;"></zy-button>
				</view>
				<view class="zy-text-black-lg-bold zy-mt-sm"> Product title </view>
				<view class="zy-row">
					<view class="zy-text-black">₱</view>
					<view class="zy-text-main-lg-bold">10.00</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "home-cell-4",
		data() {
			return {

			};
		},
		props:{
			type:{
				type:[String, Number],
				default:()=>1
			}
		}
	}
</script>

<style>

</style>